<template>
	<el-dialog :title="title" :close-on-click-modal="false" :visible.sync="visible" width="55%">
		<el-button type="primary" @click="addConfig">新增</el-button>
		<el-form :model="dataForm" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="120px">
			<el-table :data="dataList" size="mini" style="width: 100%;">
				<el-table-column header-align="center" align="center" label="key">
					<template slot-scope="scope">
						<span v-if="scope.$index == updateFlag">
							<el-input v-model="dataForm.key" size="mini" type="text"></el-input>
						</span>
						<span v-else>{{scope.row.key}}</span>
					</template>
				</el-table-column>
				<el-table-column header-align="center" align="center" label="value">
					<template slot-scope="scope">
						<span v-if="scope.$index == updateFlag">
							<el-input v-model="dataForm.value" size="mini" type="text"></el-input>
						</span>
						<span v-else>{{scope.row.value}}</span>
					</template>
				</el-table-column>
				<el-table-column header-align="center" align="center" label="操作">
					<template slot-scope="scope">
						<el-button type="text" size="small" @click="edit(scope.$index,scope.row)" v-if="scope.$index != updateFlag">编辑</el-button>
						<el-button type="text" size="small" @click="deleteCfg(scope.$index)">删除</el-button>
						<el-button type="text" size="small" @click="cancelEdit()" v-if="scope.$index == updateFlag">取消</el-button>
						<el-button type="text" size="small" @click="saveCustomerData(scope.$index,scope.row)" v-if="scope.$index == updateFlag">保存</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-form>
		<span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
	</el-dialog>
</template>

<script>
	import dateUtil from '@/utils/dateUtil'
	export default {
		data() {
			return {
				visible: false,
				dataForm: {
					key:'',
					value:''
				},
				title: '',
				id: '',
				dataList: [],
				updateFlag:-1,
				idx:'', //这里存放的是配置页面的数据下标
			}
		},
		filters: {
			formatDateTime(timestamp) {
				return dateUtil.formatDateTime(timestamp)
			}
		},
		created() {

		},
		methods: {
			init(obj) {
				var that = this
				this.title = obj.colName
				this.idx = obj.idx
				this.dataFormEmpty()
				this.dataList = []
				that.visible = true
				//只有保存之后才会有tenantId
				if(typeof(obj.tenantId) == "undefined") {
					return;
				}
			},
			saveCustomerData(idx,obj){
				var that = this
				var obj = this.dataList[idx] //当前保存的行
				obj.key = this.dataForm.key
				obj.value = this.dataForm.value
				this.dataList[idx] = obj
				this.dataFormEmpty()
			},
			dataFormEmpty(){
				this.dataForm.key = ''
				this.dataForm.value = ''
				this.updateFlag = -1
			},
			deleteCfg(idx){
				this.dataList.splice(idx,1)
			},
			addConfig() {
				if(this.updateFlag != -1){
					return;
				}
				if(this.dataList.length == 0){
					this.updateFlag = 0
				}else{
					this.updateFlag = (this.dataList.length - 1) + 1
				}
				var obj = new Object();
				obj.key = ''
				obj.value = ''
				this.dataList.push(obj)
			},
			// 表单提交
			dataFormSubmit() {
				if(this.dataList.length <= 0){
					this.visible = false
					return;
				}
				var obj = this.$parent
				var that = this
				obj.setColExtend(JSON.stringify(this.dataList),this.idx)
				this.visible = false
			},

		}
	}
</script>